<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=undefined">
</head>
<body class="pz-contain">
<h2>标准表格</h2>
<hr class="fn-mt10">
<div class="pz-table fn-mt20">
  <table id="j-checktable">
    <tr>
      <th class="checkbox">
        <label><input id="j-checkall" type="checkbox"></label>
      </th>
      <th class="fn-pointer">列名2<span class="pz-sort sort-asc"></span></th>
      <th class="fn-pointer">列名3<span class="pz-sort sort-desc"></span></th>
      <th class="fn-pointer">列名4<span class="pz-sort sort-asc-orange"></span></th>
      <th class="fn-pointer">列名5<span class="pz-sort sort-desc-orange"></span></th>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格1-2</td>
      <td>单元格1-3</td>
      <td>单元格1-4</td>
      <td>单元格1-5</td>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格2-2</td>
      <td>单元格2-3</td>
      <td>单元格2-4</td>
      <td>单元格2-5</td>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格3-2</td>
      <td>单元格3-3</td>
      <td>单元格3-4</td>
      <td>单元格3-5</td>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格4-2</td>
      <td>单元格4-3</td>
      <td>单元格4-4</td>
      <td>单元格4-5</td>
    </tr>
  </table>
</div>
<h2 class="fn-mt20">可拖拽排序表格</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-move"></em>
  <span class="title">可拖拽排序表格</span>
  <div class="more">
    <div id="j-dragbtn" class="pz-switch switch-small switch-close fn-w60">
      <div class="switch-btn">锁定</div>
    </div>
  </div>
</div>
<div class="pz-table">
  <table id="j-drag">
    <tr>
      <th class="checkbox">
        <label><input id="j-drag-checkall" type="checkbox"></label>
      </th>
      <th>列名2</th>
      <th>列名3</th>
      <th>列名4</th>
      <th>列名5</th>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格1-2</td>
      <td>单元格1-3</td>
      <td>单元格1-4</td>
      <td>单元格1-5</td>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格2-2</td>
      <td>单元格2-3</td>
      <td>单元格2-4</td>
      <td>单元格2-5</td>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格3-2</td>
      <td>单元格3-3</td>
      <td>单元格3-4</td>
      <td>单元格3-5</td>
    </tr>
    <tr>
      <td class="checkbox">
        <label><input type="checkbox"></label>
      </td>
      <td>单元格4-2</td>
      <td>单元格4-3</td>
      <td>单元格4-4</td>
      <td>单元格4-5</td>
    </tr>
  </table>
</div>
<h2 class="fn-mt20">无边框表格</h2>
<hr class="fn-mt10">
<div class="pz-table fn-mt20">
  <table class="table-noborder">
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <th>列名3</th>
      <th>列名4</th>
      <th>列名5</th>
    </tr>
    <tr>
      <td>单元格1-1</td>
      <td>单元格1-2</td>
      <td>单元格1-3</td>
      <td>单元格1-4</td>
      <td>单元格1-5</td>
    </tr>
    <tr>
      <td>单元格2-1</td>
      <td>单元格2-2</td>
      <td>单元格2-3</td>
      <td>单元格2-4</td>
      <td>单元格2-5</td>
    </tr>
    <tr>
      <td>单元格3-1</td>
      <td>单元格3-2</td>
      <td>单元格3-3</td>
      <td>单元格3-4</td>
      <td>单元格3-5</td>
    </tr>
    <tr>
      <td>单元格4-1</td>
      <td>单元格4-2</td>
      <td>单元格4-3</td>
      <td>单元格4-4</td>
      <td>单元格4-5</td>
    </tr>
  </table>
  <div id="j-page" class="pz-page fn-mt20 fn-textright"></div>
</div>
<script type="text/javascript" src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script type="text/javascript" src="../pizza/js/pizza.js?_t=undefined"></script>
<script type="text/javascript">
// 全选
$('#j-checkall').click(function(){
  var checked = this.checked;
  pizzaCmd.checkall('j-checktable', checked);
});
$('#j-drag-checkall').click(function(){
  var checked = this.checked;
  pizzaCmd.checkall('j-drag', checked);
});
// 拖拽排序
var newDragorder = new pizzaCmd.dragorder('j-drag', 1);
$('#j-dragbtn').click(function(){
  if ($(this).hasClass('switch-close')) {
    $(this).removeClass('switch-close').addClass('switch-open');
    $(this).find('.switch-btn').html('排序');
    newDragorder.start();
  } else if ($(this).hasClass('switch-open')) {
    $(this).removeClass('switch-open').addClass('switch-close');
    $(this).find('.switch-btn').html('锁定');
    var result = newDragorder.end();
  }
});
// 分页
pizzaCmd.page('j-page', {
  totalPage: 20,
  page: 20,
  callback: function (page) {
    alert(page);
  }
});
</script>
</body>
</html>